<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" scope="page" value="${request.contextPath}" />
<!DOCTYPE  >
<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>知识库</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/weui/1.1.2/weui-for-work.min.css"/>
    <script type="text/javascript" src="${ctx}/static/jquery/jquery-1.8.3.min.js"></script>
    <%--<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.2/weui.min.js"></script>--%>
    <!-- 企业微信的JS-SDK -->
    <%--<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>--%>
    <style>
        .weui-search-bar__box{height:auto!important;}
        .text-tag{
            word-break: break-all;
            text-indent: 2em;
            /*display: none;*/
        }
        .u>li{
            text-indent: 1em;
            font-size: 20px;
            line-height: 2.5;
        }
    </style>
</head>
<body style="background-color: #f8f8f8" >
<div class="page">
    <div class="page__bd">
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form" onsubmit="return false;">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" autocomplete="off" placeholder="搜索" onkeypress="javascript:search(event)" required/>
                    <a href="javascript:searchClear()" class="weui-icon-clear" id="searchClear"></a>
                </div>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>
    </div>
    <div class="page_bd" id="page_init">
        <%-- <c:forEach items="${list}" var="knowledge">
             <div class="weui-form-preview">
                 <div class="weui-form-preview__bd">
                     <div class="weui-form-preview__item">
                         <label class="weui-form-preview__label">标题</label>
                         <span class="weui-form-preview__value"><c:out value="${knowledge.title}"/></span>
                     </div>
                     <div class="weui-form-preview__item">
                         <label class="weui-form-preview__label">标签</label>
                         <span class="weui-form-preview__value"><c:out value="${knowledge.tag}"/></span>
                     </div>
                     <div class="weui-form-preview__item">
                         <label class="weui-form-preview__label">内容</label>
                         <span class="weui-form-preview__value"><c:out value="${knowledge.comment}"/></span>
                     </div>
                 </div>
             </div>
             <br>
         </c:forEach>--%>
    </div>
    <%--<c:if test="${empty list}">

        <div class="weui-msg">
            <div class="weui-msg__icon-area"><i class="weui-icon-waiting weui-icon_msg"></i></div>
            <div class="weui-msg__text-area">
                <h2 class="weui-msg__title">知识库暂时没有内容</h2>
            </div>
        </div>
    </c:if>--%>
</div>
<script>

    $(function () {
        console.info(getUrlParam("condition"));
        getData("");

    });

    //paraName 等找参数的名称
    function getUrlParam(paraName) {
        var url = document.location.toString();
        var arrObj = url.split("?");

        if (arrObj.length > 1) {
            var arrPara = arrObj[1].split("&");
            var arr;

            for (var i = 0; i < arrPara.length; i++) {
                arr = arrPara[i].split("=");

                if (arr != null && arr[0] == paraName) {
                    return arr[1];
                }
            }
            return "";
        }
        else {
            return "";
        }
    }
    function getData(condition) {
        $.ajax({
            url:'${ctx}/weixin/knowledge/list?condition='+condition,
            dataType:'json',
            type: 'post',
            xhrFields: {
                withCredentials: true
            },
            success: function (result) {
                $("#page_init").empty();
                var data = result.data;
                if(!data) return;
                var labelJson = {"标题":"knowledge.title","标签":"knowledge.tag","内容":"knowledge.comment"};
                var htmlStr = "";
                for(var key in data) {
                    htmlStr += "<ol class='u'>";
                    htmlStr += "<li onclick='toggleTag(this)'>" + key + "</li>";
                    var list=data[key];
                    for (var i=0;i<list.length;i++){
                        htmlStr += "<div class='weui-form-preview'>";
                        htmlStr += "<div class='text-tag' hidden ><a href='/weixin/pdf/web/viewer.html?file=${ctx}/weixin/knowledge/download/" + list[i].id + "'>" + list[i].tag + "</a></div>";
                    }
                    htmlStr += "</div>";
                    htmlStr += "</ol>";
                }
                $("#page_init").append(htmlStr);
            },
            error: function (result) {
                console.info(result);
            }
        });
    }
    function toggleTag(t) {
        $(t).parent(".u").find(".text-tag").toggle();
    }
    function searchClear() {
        $("#searchInput").val('');
    }
    function search(e) {
        var keycode = e.keyCode;
        if(keycode == '13') {
            var condition = $("#searchInput").val();
            <%--location.href = '${ctx}/weixin/knowledge/list?condition='+condition;--%>
            getData(condition);
        }
    }
</script>
</body>
</html>
